<template>
    <div class="container">
        <div class="title">生意参谋</div>
        <div class="data">
            <div class="data-item">
                <div class="number">{{ todayOrderCount }}</div>
                <div class="label">今日订单数量</div>
            </div>
            <div class="data-item">
                <div class="number">{{ yesterdayOrderCount }}</div>
                <div class="label">昨日订单数量</div>
            </div>
            <div class="data-item">
                <div class="number" :class="{ negative: isNegative(orderCountGrowth) }">{{ orderCountGrowth }}</div>
                <div class="label">环比增长</div>
            </div>
            <div class="data-item">
                <div class="number">{{ todayOrderAmount }}</div>
                <div class="label">今日订单总金额</div>
            </div>
            <div class="data-item">
                <div class="number">{{ yesterdayOrderAmount }}</div>
                <div class="label">昨日订单总金额</div>
            </div>
            <div class="data-item">
                <div class="number" :class="{ negative: isNegative(orderAmountGrowth) }">{{ orderAmountGrowth }}</div>
                <div class="label">环比增长</div>
            </div>
            <div class="data-item">
                <div class="number">{{ todayChargeVolume }}</div>
                <div class="label">今日充电量</div>
            </div>
            <div class="data-item">
                <div class="number">{{ yesterdayChargeVolume }}</div>
                <div class="label">昨日充电量</div>
            </div>
            <div class="data-item">
                <div class="number" :class="{ negative: isNegative(chargeVolumeGrowth) }">{{ chargeVolumeGrowth }}</div>
                <div class="label">环比增长</div>
            </div>
            <div class="data-item">
                <div class="number">{{ todayCarWashAmount }}</div>
                <div class="label">今日洗车金额</div>
            </div>
            <div class="data-item">
                <div class="number">{{ yesterdayCarWashAmount }}</div>
                <div class="label">昨日洗车金额</div>
            </div>
            <div class="data-item">
                <div class="number" :class="{ negative: isNegative(carWashAmountGrowth) }">{{ carWashAmountGrowth }}</div>
                <div class="label">环比增长</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DataSource',
    data() {
        return {
            todayOrderCount: 906,
            yesterdayOrderCount: 1464,
            orderCountGrowth: '-38.11%',
            todayOrderAmount: '¥37731.42',
            yesterdayOrderAmount: '¥53256.12',
            orderAmountGrowth: '-29.15%',
            todayChargeVolume: '35454度',
            yesterdayChargeVolume: '52350度',
            chargeVolumeGrowth: '-32.27%',
            todayCarWashAmount: '¥0.00',
            yesterdayCarWashAmount: '¥538.80',
            carWashAmountGrowth: '-100.00%'
        };
    },
    methods: {
        isNegative(value) {
            if (typeof value === 'string') {
                return value.includes('-')
            }
            return false
        }
    }
};
</script>

<style scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 10px;
    box-sizing: border-box;
}

.title {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #36C4FF;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
}


.data {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    margin-top: 20px;
    padding-bottom: 10px;
}

.data-item {
    color: #ffffff;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
}

.number {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
}

.label {
    font-size: 14px;
    opacity: 0.7;
}

/* 负增长高亮红色 */
.number.negative {
    color: #ff4d4f;
}
</style>
